<template>
  <transition name="slide">
    <!-- <div class="singer-detail"></div> -->
    <music-list :songs='songs' :title='title' :bg-image='bgImage'></music-list>
  </transition>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import {
    getSingerDetaill
  } from 'api/singer';
  import {
    createSong
  } from 'common/js/song';
  import MusicList from 'components/music-list/MusicList';

  export default {
    name: 'SingerDetall',
    data() {
      return {
        songs: []
      }
    },
    computed: {
      ...mapState(['singer']),
      title() {
        return this.singer.name
      },
      bgImage() {
        return this.singer.imgUrl
      }
    },
    created() {
      this.getDetaill()
    },
    methods: {
      getDetaill() {
        if (!this.singer.id) {
          this.$router.push('/singer')
          return
        }
        getSingerDetaill(this.singer.singer_mid).then((res) => {
          this.songs = this._normalizeSongs(res.data.list)
        })
      },
      _normalizeSongs(list) {
        let ret = [];
        list.forEach(item => {
          let {
            musicData
          } = item
          if (musicData.songid && musicData.albummid) {
            ret.push(createSong(musicData))
          }
        });
        return ret
      }
    },
    components: {
      MusicList
    }
  }

</script>
